<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的收货地址</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .bgcolor-white {
            background-color: #fff;
            color: #151516;
            font-size: 0.6rem;
        }

        .addressitem {
            line-height: 1.5rem;
            padding: 0.3rem;
            position: relative;
        }

        .addressitem .address-item-choose-btn {
            position: absolute;
            display: inline-block;
            width: 2rem;
            height: 1.2rem;
            top: 25px;
            right: 15px;
            line-height: 1.2rem;
            font-size: 0.7rem;
            color: #58595b;
            text-align: center;
            border: 1px solid #58595b;
            border-radius: 5px;
        }

        .addressop {
            position: relative;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            font-size: 0.6rem;
        }

        .default-btn {
            color: #e02e24;
        }

        .common-btn {
            color: #9c9c9c;
        }

        .common-btn span {
            position: absolute;
            top: -0.1rem;
            left: 1rem;
            display: inline-block;
        }

        .aui-opbtn span {
            display: inline-block;
        }

        .rediobtn-red {
            border: 1px solid #e02e24;
            font-size: 0.6rem;
            background-color: #e02e24;
            border-radius: 50%;
            color: #fff;
        }

        .radiobtn-hui {
            display: inline-block;
            content: " ";
            font-size: 0.6rem;
            width: 0.8rem;
            height: 0.8rem;
            border: 1px solid #d9d9d9;
            border-radius: 50%;
            color: #fff;
        }

        .addressop .aui-opbtn {
            display: inline-block;
            margin-left: 0.5rem;
        }

        .address-box .addbtn {
            text-align: center;
            background-color: #e02e24;
            width: 60%;
            margin: 0.5rem auto;
            border-radius: 0.2rem;
            line-height: 1.5rem;
            color: #fff;
        }
        .sku-selector-bg{
           position: absolute;
           height: 100%;
           width: 100%;
           left: 0;
           top: 0;
           bottom: 0;
           background: rgba(0,0,0,.7);
           z-index: 1000;
       }


    </style>
</head>

<body>

    <div class="aui-content address-box" id="addressbox" v-cloak>

        <div class="addressitem bgcolor-white aui-margin-b-5" v-for="item in addresslist" :key="item.id">
            <div class="item-name">{{item.cnname}}，{{item.mobile}}</div>
            <div class="item-address">{{item.province}}, {{item.city_level1}},{{item.city_level2}},{{item.address}}</div>
            <div class="addressop">


                <div class="default-btn" v-if="item.isdefault==1"><i class="aui-iconfont aui-icon-correct rediobtn-red"></i> 已设为默认</div>
                <div class="common-btn" v-else @click="setdefault(item)"><i class="radiobtn-hui"> </i> <span>设为默认</span></div>

                <div class="aui-opbtn">
                    <span @click="goedit(item)"><i class="aui-iconfont aui-icon-edit"></i> 编辑</span>
                    <span @click="godelete(item)"><i class="aui-iconfont aui-icon-trash"></i> 删除</span>
                </div>
            </div>
            <span class="address-item-choose-btn" v-if="postparam.product_id>0" @click="usedit(item)">使用</span>
        </div>
        <div class="addbtn" @click="add">
            <div> 手动添加地址</div>
        </div>


        <div id="addboxp"   v-show="showaddbox"   style="overflow: hidden">
              <section class="sku-selector-bg" @touchmove.prevent>
                  <div   id="addbox" style="z-index:1001;position: absolute;top:10px;width: 100%;">
                      <ul class="aui-list aui-form-list">
                          <li class="aui-list-header " style="background-color:#f2f2f2;position: relative">
                              <span style="display: inline-block;margin: 0 auto;font-size: 0.8rem">收货地址</span>

                          </li>
                          <li class="aui-list-item">
                              <div class="aui-list-item-inner">
                                  <div class="aui-list-item-input" style="width: 50%">
                                      <input type="text" placeholder="名字" v-model="cnname" >
                                  </div>
                                  <div class="aui-list-item-input" style="border-left: 1px solid #ddd;">
                                      <input type="number" v-model="mobile" placeholder="请输入手机号">
                                  </div>
                              </div>
                          </li>

                          <li class="aui-list-item aui-list-item-arrow" >
                              <div class="aui-list-item-inner">
                                  <div class="aui-list-item-input regiontxt"    id="city" @click="openseladdress">
                                      {{province ? province : '省'}},{{city_level1 ? city_level1 : '市'}},{{city_level2 ? city_level2: '区'}}
                                  </div>
                              </div>
                          </li>
                          <li class="aui-list-item">
                              <div class="aui-list-item-inner">

                                  <div class="aui-list-item-input"  >
                                      <input type="text" v-model="address" placeholder="请输入详细地址">
                                  </div>
                              </div>
                          </li>
                          <li class="aui-list-item"  style="justify-content: center" >
                              <div class="aui-btn aui-margin-t-10 aui-margin-b-10"  @click="saveaddress"  style="background-color:#c0c0c0;color:#fff">保存</div>
                              <div class="aui-btn aui-margin-t-10 aui-margin-b-10"  @click="closeaddbox"  style="background-color:#d1d1d1;color:#fff;margin-left: 10px;">取消</div>
                          </li>
                      </ul>
                  </div>
              </section>
          </div>

    </div>



    <script language="javascript">


        var vm = new Vue({
            el: '#addressbox',
            data: {
                postparam: {
                    product_id: 0,
                    'sku_id': 0,
                    buymod: '',
                    orderno: '',
                    buynum: 0,
                     addressid: 0,
                 },
                showaddbox:false,
                cnname:'',
                mobile:'',
                province:'',
                city_level1:'',
                city_level2:'',
                address:'',
                token:'',
              id:0,
                addresslist: [],

            },
            methods: {
              openseladdress:function(){
                var addressView = api.require('addressView');
                addressView.open({
                        file_addr: 'widget://res/district.txt', //数据源地址
                        selected_color: '#ff0000', //颜色
                      //  pro_id: 410000, //省id
                      //  city_id: 410100, //市id
                      //  dir_id: 410104 //区id
                    });
           addressView.show({}, function(ret, err) {

               if (ret.status) {
                   var data =ret.data;
                   vm.province = data[0].name;
                   vm.city_level1 = data[1].name;
                   vm.city_level2 = data[2].name;
                //   alert(JSON.stringify(ret)); //返回值
               }
           });



              },
              closeaddbox:function(){
                this.showaddbox = false;
              },
              saveaddress:function() {
                var pdata = {
                    cnname:this.cnname,
                    mobile:this.mobile,
                    province:this.province,
                    city_level1:this.city_level1,
                    city_level2:this.city_level2,
                    address:this.address,
                    id:this.id,
                    token:this.token
                 };
                 var url='/api/address/add';
               if(this.id>0){
                   url='/api/address/edit';
               }


                $page.get_data(url,'post',pdata,function (ret) {

                    if(ret.errno!=1000){

                      api.toast({
                          msg: ret.errmsg,
                          duration: 2000,
                          location: 'bottom'
                      });

                    }else{
                    vm.showaddbox =false;

                        if(vm.postparam.product_id>0){
                          vm.postparam.addressid = ret.data.id;
                          console.log('go checkorder page');
                          console.log(JSON.stringify(vm.postparam));
                          $page.openwin('product_checkorder','../product/checkorder.html', vm.postparam);
                         }else{
                            vm.load_init();
                            //vm.addresslist = [].concat(vm.addresslist);
                           //$page.openwin('home_address','./address.html');
                         }
                      }
                });



              },
                usedit: function(item) {
                    this.postparam.addressid = item.id;

                    closewin();

                    $page.openwin('product_checkorder', '../product/checkorder.html', this.postparam);
                },
                goedit: function(item) {
                       this.id = item.id;
                       this.province=item.province;
                       this.city_level1 = item.city_level1;
                       this.city_level2 = item.city_level2;
                       this.showaddbox = true;
                  //  this.postparam.addressid = item.id;
                  //  this.postparam.id = item.id;
                  //  $page.openwin('home_addaddress', './addaddress.html', this.postparam);
                },
                godelete: function(item) {
                    $page.get_data('/api/address/del', 'post', {
                        id: item.id,
                        token: this.token

                    }, function(ret) {
                        console.log(ret);
                        for (var i in vm.addresslist) {
                            if (vm.addresslist[i].id == item.id) {
                                vm.addresslist.splice(i, 1);
                            }
                        }
                        vm.addresslist = [].concat(vm.addresslist);

                    });
                },
                add: function() {
                  this.id=0; 
                  this.showaddbox = true;
                  // $page.openwin('home_addaddress','./addaddress.html',this.postparam);
                 },
                setdefault: function(item) {
                     $page.get_data("/api/address/setDefault", 'post', {
                        id: item.id,
                        token: this.token
                    }, function(ret) {
                        for (var i in vm.addresslist) {
                            if (item.id == vm.addresslist[i].id) {
                                vm.addresslist[i].isdefault = 1;
                            } else {
                                vm.addresslist[i].isdefault = 0;
                            }
                        }
                        item.isdefault = 1;

                        vm.addresslist = [].concat(vm.addresslist);
                        console.log(vm.addresslist);
                    });
                },
                load_init: function() {
                    this.token = $api.getStorage('token');
                    $page.get_data('/api/address/getList', 'get', {
                        token:this.token
                    }, function(ret) {
                        vm.addresslist = ret.data;
                    });
                }
            }
        });
        apiready=function(){
              checklogin();
          var pageParam = api.pageParam;
          console.log(JSON.stringify(pageParam));
          vm.postparam.product_id = pageParam.product_id;
          vm.postparam.sku_id = pageParam.sku_id;
          vm.postparam.buymod = pageParam.buymod;
          vm.postparam.orderno = pageParam.orderno;
          vm.postparam.buynum = pageParam.buynum;
          vm.token = $api.getStorage('token');
          $page.init();
          vm.load_init();

        }

    </script>

</body>

</html>
